import dayjs from 'dayjs'
import classnames from 'classnames'

import Icon from '@/components/Icon'

import styles from './index.module.scss'

const CommentItem = ({
                       type = 'normal',
                       aut_photo,
                       aut_name,
                       like_count,
                       is_followed,
                       is_liking,
                       content,
                       reply_count,
                       pubdate,
                       onThumbsUp,
                       onCommentReplyShow
                     }) => {
  // 回复按钮
  const replyJSX =
    type === 'normal' ? (
      <span className="replay" onClick={onCommentReplyShow}>
        {reply_count} 回复
        <Icon type="iconbtn_right"/>
      </span>
    ) : null

  return (
    <div className={styles.root}>
      <div className="avatar">
        <img src="http://geek.itheima.net/images/user_head.jpg" alt=""/>
      </div>
      <div className="comment-info">
        <div className="comment-info-header">
          <span className="name">{aut_name}</span>
          {/* 文章评论、评论的回复 */}
          {(type === 'normal' || type === 'reply') && (
            <span className="thumbs-up" onClick={onThumbsUp}>
              {like_count}
              <Icon type={is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}/>
            </span>
          )}
          {/* 要回复的评论 */}
          {type === 'origin' && (
            <span className={classnames('follow', is_followed ? 'followed' : '')}>
              {is_followed ? '已关注' : '关注'}
            </span>
          )}
        </div>
        <div className="comment-content">{content}</div>
        <div className="comment-footer">
          {replyJSX}
          {/* 非评论的回复 */}
          {type !== 'reply' && (
            <span className="comment-time">{dayjs().from('2021-01-01')}</span>
          )}
          {/* 文章的评论 */}
          {type === 'origin' && (
            <span className="thumbs-up">
              10
              <Icon type={is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}/>
            </span>
          )}
        </div>
      </div>
    </div>
  )
}

export default CommentItem
